<template>
  <div class="lc-table-wrapper lc-cell-wrapper">
    <div
      v-for="(data,i) in tableData"
      :key="i">
      <div class="van-cell table-cell">
        <div class="van-cell__title">
          {{ item.label }}  {{ getIndex(i) }}
        </div>
        <div class="van-cell__value">
          <!-- 工具栏-->
          <template
            v-for="(toolbar,j) in toolbars">
            <!-- <template v-if="j<2" > -->
            <van-button
              v-if="showToolbarButton(toolbar,i)"
              :type="getButtonType(toolbar.style)"
              :key="i+j"
              size="mini"
              plain
              style="margin-right: 2px;margin-bottom: 5px;"
              @click="onToolbarClick(toolbar,i)"
            >{{ toolbar.label }}</van-button>
            <!-- </template> -->
            <!-- <template v-else>
              <van-button
                v-if="showToolbarButton(toolbar,i)"
                :type="getButtonType(toolbar.style)"
                :key="i+j"
                size="mini"
                plain
                style="margin-right: 5px;"
                @click="onToolbarClick(toolbar,i)"
              >...</van-button>
            </template> -->
          </template>
        </div>
      </div>
      <!--子表字段-->
      <dynamic-form-item
        v-for="column in getRowColumns(i)"
        ref="formItem"
        v-model="data[column.name]"
        :key="i+column.name"
        :field="column"
        :data ="data"
        :params ="params"
        :form-data="formDataValue"
        :rights="rights[column.name]"

        :is-readonly="dialogRights"
        @cinput="handleInput($event,i)"
        @change-form-data="changeFormData($event)"
      />
    </div>
    <div v-if="tableData.length === 0">
      <div class="van-cell" style="background-color: #f8f8f8;">
        <div class="van-cell__title van-ellipsis">
          {{ item.label }}
        </div>
        <div class="van-cell__value">
          <!-- 工具栏-->
          <template
            v-for="(toolbar,j) in toolbars">
            <van-button
              v-if="showToolbarButton(toolbar,-1)"
              :type="getButtonType(toolbar.style)"
              :key="j"
              size="mini"
              plain
              style="margin-right: 5px;"
              @click="onToolbarClick(toolbar,-1)"
            >{{ toolbar.label }}</van-button>
          </template>
        </div>
      </div>
    </div>

    <!-- 弹窗-->
    <van-popup
      v-if="dialogMode"
      v-model="dialogPopup"
      class="lc-fullscreen-popup">
      <van-nav-bar
        :title="item.label"
        :left-text="$t('close')"
        :right-text="$t('common.button.confirm')"
        @click-left="closePopup"
        @click-right="dialogConfirm"
      />
      <div class="lc-fixed-navbar">
        <dynamic-form-item
          v-for="(field) in columns"
          ref="dialogForm"
          v-model="dialogData[field.name]"
          :key="field.name"
          :field="field"
          :data ="dialogFormData"

          :rights="rights[field.name]"
          :params ="params"

          @cinput="handleDialogInput($event)"
        />
      </div>
    </van-popup>

  </div>
</template>
<script>
import Vue from 'vue'
import FormField from '../../form-field'
import FormItem from '../../form-item'
import LcControl from '@/components/LcControl'

Vue.component('dynamic-form-field', FormField)
Vue.component('dynamic-form-item', FormItem)
Vue.use(LcControl)
import FormOptions from '../../constants/formoptions'
import FormUtil from '../../utils/formUtil'
import JForm from '@/components/utils/JForm'// 自定义脚本

export default {
  name: 'LcTable',
  props: {
    desc: {
      type: String
    },
    value: {
      type: [Array, String],
      default: () => { return [] }
    },
    item: {
      type: Object,
      default: () => { return [] }
    },
    readonly: {
      type: Boolean,
      default: false
    },
    permissions: {
      type: Object
    },
    responseFormula: {
      type: Object,
      default: () => { return {} }
    },
    formData: {
      type: Object
    }
  },
  data() {
    return {
      rights: {}, // 字段权限
      tableRights: FormOptions.t.PERMISSIONS.EDIT, // 表权限
      buttonRights: {}, // 按钮权限

      curRow: 0,
      dialogRights: false, // 弹窗权限
      dialogData: {}, // 弹窗数据
      dialogPopup: false // 是否弹窗
    }
  },
  computed: {
    // 取出顶部工具栏
    toolbars() {
      return this.item['field_options']['buttons']
    },
    columns() {
      return this.item['field_options']['columns']
    },
    tableData() {
      if (this.$utils.isNotEmpty(this.value)) {
        return this.value
      } else {
        if (this.tableMode === 'block') { // 块模式才初始化数据
          return [this.getDefaultData(0)]
        } else {
          return []
        }
      }
    },
    formDataValue() {
      return this.formData
    },
    params() { // 扩展参数
      return {
        code: this.item.code,
        responseFormula: this.responseFormula
      }
    },
    tableMode() { // 子表模式
      return this.item['field_options']['mode']
    },
    dialogMode() { // 弹窗模式
      return false
      // TODO 弹窗模式有bug 暂时屏蔽
      // this.tableMode === 'dialog'
    },
    dialogFormData() {
      return this.dialogData
    }
  },
  watch: {
    value() {
      this.$nextTick(() => {
        this.getFormValidator()
      })
    }
  },
  created() {
    this.initResponseFields()
  },
  mounted() {
    JForm._init(this)
    this.getFormValidator()
  },
  methods: {
    /**
     *  初始化字段
     */
    initResponseFields() {
      const columns = this.columns
      if (!columns) { return }
      const permissions = this.permissions
      columns.forEach(item => {
        // 设置权限
        this.rights[item.name] = this.getPermissions(permissions, item) || this.getDefaultRigths(item)
      })
      if (this.dialogMode) {
        this.dialogRights = true
      }
      // 表权限
      this.tableRights = this.readonly ? FormOptions.t.PERMISSIONS.READ : (permissions ? permissions.rights : FormOptions.t.PERMISSIONS.EDIT)
      // 按钮权限
      this.getButtonRights(permissions)
    },
    getPermissions(permissions, { name, field_type }) {
      if (this.$utils.isEmpty(permissions)) {
        return this.readonly ? FormOptions.t.PERMISSIONS.READ : null
      }
      const fieldType = field_type
      let rightsValue = null
      const isNonInputField = FormOptions.t.NON_INPUT_FIELD_TYPES.findIndex((n) => { return n === fieldType }) > -1
      const isSpecial = false
      if (isNonInputField && permissions.columns) { // 非输入字段
        rightsValue = permissions.columns[name] ? permissions.columns[name] : null
      } else { // 字段
        rightsValue = permissions.columns[name] ? permissions.columns[name] : null
      }

      if (this.readonly && !isNonInputField && !isSpecial) { // 如果只读
        rightsValue = rightsValue !== FormOptions.t.PERMISSIONS.HIDE ? FormOptions.t.PERMISSIONS.READ : rightsValue
      }

      return rightsValue
    },
    /**
     * 默认权限
     */
    getDefaultRigths(item) {
      var hideRights = item.field_options.hide_rights
      if (this.$utils.isNotEmpty(hideRights) && hideRights) {
        return FormOptions.t.PERMISSIONS.HIDE
      }
      var readRights = item.field_options.read_rights
      if (this.$utils.isNotEmpty(readRights) && readRights) {
        return FormOptions.t.PERMISSIONS.READ
      }
      return
    },
    getButtonRights(permissions) {
      if (this.$utils.isEmpty(permissions)) {
        return this.readonly ? FormOptions.t.PERMISSIONS.HIDE : null
      }
      this.toolbars.forEach(btn => {
        const code = this.getButtonCode(btn)
        this.buttonRights[code] = permissions.buttons[code]
      })
    },
    getIndex(i) {
      if (this.tableData.length === 1) { return '' }
      return `(${i + 1})`
    },
    getButtonCode(btn) {
      let code = btn.type
      if (btn.type === 'custom') { code = btn.code ? btn.code : (btn.type + btn.$index) }
      return code
    },
    showToolbarButton(toolbar, i) {
      // 如果只读
      if (this.readonly) return false
      const code = this.getButtonCode(toolbar)
      if (i === -1 && (code === 'remove' || code === 'edit')) { return false }
      // 第一行不能删除 按钮
      if (code === 'remove' && this.tableData.length === 1) { return false }
      // 判断权限
      if (this.buttonRights[code] === FormOptions.t.PERMISSIONS.HIDE) { return false }

      return true
    },
    getButtonType(style) {
      if (!style) { return null }
      return style.split('-')[1]
    },
    onToolbarClick(item, i) {
      const tableData = this.$utils.newData(this.tableData)
      if (item.type === 'add' || item.type === 'edit' || item.type === 'remove') {
        // 前置事件
        const beforSubButtonResult = JForm._beforeSubButton(this, item.type, i, this.formData)
        if (typeof (beforSubButtonResult) !== 'undefined' && !beforSubButtonResult) {
          return
        }
      }
      if (item.type === 'add') {
        this.handleAdd(tableData, i)
        this.afterScript(item, i)
      } else if (item.type === 'edit') {
        this.handleEdit(i)
        this.afterScript(item, i)
      } else if (item.type === 'remove') {
        this.$dialog.confirm({
          title: '提示',
          message: '确定删除？'
        }).then(() => {
          tableData.splice(i, 1)
          this.handleEmitInput(tableData)
          this.afterScript(item, i)
        })
      }
    },
    afterScript(item, i) {
      const afterSubButtonResult = JForm._afterSubButton(this, item.type, i, this.formData)
      if (typeof (afterSubButtonResult) !== 'undefined' && !afterSubButtonResult) {
        return
      }
    },
    // 添加
    handleAdd(tableData, i) {
      if (this.dialogMode) {
        this.dialogPopup = true
        this.curRow = i + 1
        this.dialogData = this.$utils.newData(this.getDefaultDialogData())// 弹窗数据
      } else {
        tableData.push(this.getDefaultData(i + 1))
        this.handleEmitInput(tableData)
      }
    },
    handleEdit(i) {
      this.curRow = i
      this.dialogPopup = true
      this.dialogData = this.$utils.newData(this.tableData[i])
    },
    dialogConfirm() {
      this.dialogPopup = false
      const tableData = this.$utils.newData(this.tableData)
      if (tableData[this.curRow]) {
        tableData[this.curRow] = this.dialogData
      } else {
        tableData.push(this.dialogData)
      }

      this.handleEmitInput(tableData)
    },
    closePopup() {
      this.dialogPopup = false
    },
    handleDialogInput(data) {
      Object.assign(this.dialogData, data)
    },
    getDefaultData(i) {
      const data = {}
      this.columns.forEach(item => {
        // 设置默认值
        data[ item.name] = FormUtil.getFieldDefaultValue(item, (n, d) => {
          this.$nextTick(() => {
          // 异步数据
            const tableData = this.$utils.newData(this.tableData)
            tableData[i][n] = d
            this.handleEmitInput(tableData)
          })
        })
      })
      return data
    },
    getDefaultDialogData() {
      const data = {}
      this.columns.forEach(item => {
        // 设置默认值
        data[ item.name] = FormUtil.getFieldDefaultValue(item, (name, d) => {
          // 异步数据
          this.dialogData[name] = d
        })
      })
      return data
    },
    handleInput(data, i) {
      const tableData = this.$utils.newData(this.tableData)
      tableData[i] = data
      this.handleEmitInput(tableData)
    },
    changeFormData(data) {
      this.$emit('change-form-data', data)
    },
    handleEmitInput(data) {
      // 这里没有上报event，直接就是value了
      this.$emit('input', data)
    },
    getEl() {
      if (!this.$refs.formItem) { return }
      const $validate = []
      this.$refs.formItem.forEach(el => {
        $validate.push(el)
      })
      return $validate
    },
    getFormValidator() {
      if (!this.$refs.formItem) { return }
      const $validate = []
      this.$refs.formItem.forEach(el => {
        const v = new Promise((resolve, reject) => {
          el.getFormValidator().validate().then((result) => {
            resolve(result)
          })
        })
        $validate.push(v)
      })
      return Promise.all($validate)
    },
    getRowColumns(row) {
      var columns = []
      this.item['field_options'].columns.forEach((column) => {
        column.isSub = true
        column.table = this.item
        column.row = row
        columns.push(column)
      })
      return columns
    }
  }
}
</script>
<style lang="scss" scoped>
  .lc-table-wrapper{
      padding-left: 5px;
       padding-right: 5px;
    .table-cell{
      background-color: #f8f8f8;
      .van-cell__title{
        font-size: 12px;
        color: #999;
      }
    }

  }
</style>
